<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<!-- <uni-nav-bar title="售后服务" left-icon="back" @clickLeft="goBack"></uni-nav-bar> -->
		
		<!-- 服务选项列表 -->
		<view class="service-list">
			<!-- 退货退款 -->
			<view class="service-item first-item" @click="navigateTo('refund')">
				<image src="/static/yzmphoto/退.png" class="icon"></image>
				<view class="text-container">
					<text class="title">退货退款</text>
					<text class="description">因质量、错发等问题需要退货退款</text>
				</view>
				<uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
			</view>
			
			<!-- 换货 -->
			<view class="service-item" @click="navigateTo('exchange')">
				<image src="/static/yzmphoto/换货.png" class="icon"></image>
				<view class="text-container">
					<text class="title">换货</text>
					<text class="description">因尺寸、错发等问题需要换货</text>
				</view>
				<uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
			</view>
			
			<!-- 售后记录 -->
			<view class="service-item" @click="navigateTo('record')">
				<image src="/static/yzmphoto/售后记录.png" class="icon"></image>
				<view class="text-container">
					<text class="title">售后记录</text>
				</view>
				<uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
			</view>
			
			<!-- 在线客服 -->
			<view class="service-item" @click="navigateTo('support')">
				<image src="/static/yzmphoto/客服.png" class="icon"></image>
				<view class="text-container">
					<text class="title">在线客服</text>
				</view>
				<uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			navigateTo(page) {
				let url = '';
				switch(page) {
					case 'refund':
						url = '/pages/yzmreturned/yzmreturned';
						break;
					case 'exchange':
						url = '/pages/yzmexchanged/yzmexchanged';
						break;
					case 'record':
						url = '/pages/yzmAfter-salesrecord/yzmAfter-salesrecord';
						break;
					case 'support':
						// // 在线客服功能，可以跳转到客服页面或显示联系方式
						// uni.showToast({
						// 	title: '正在连接客服...',
						// 	icon: 'none'
						// });
						url = '/pages/mySxz/onlineService/onlineService';
						break;
						return;
					default:
						url = `/${page}`;
				}
				
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style>
	.container {
		padding: 0;
		background-color: #f5f5f5; /* 灰色背景 */
		min-height: 100vh;
	}
	
	.service-list {
		margin-top: 0;
	}
	
	.service-item {
		display: flex;
		align-items: center;
		padding: 15px 20px;
		background-color: #fff; /* 白色背景 */
		border-bottom: 1px solid #eee;
	}
	
	.first-item {
		margin-top: 0; /* 确保第一个项目紧贴顶部 */
	}
	
	.text-container {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	
	.icon {
		width: 40px;
		height: 40px;
		margin-right: 10px;
	}
	
	.title {
		font-size: 16px;
		color: #333;
	}
	
	.description {
		font-size: 14px;
		color: #999;
		margin-top: 5px;
	}
</style>